<template>
    <el-row :gutter="2">
        <el-col :col="24" style="display: flex;justify-content: space-between; margin-bottom: 10px;">
            <el-space :size="2" wrap>
                <el-input v-model="search" placeholder="搜索" style="max-width: 300px;" />
                <el-button :icon="Search" plain />
            </el-space>
            <el-button :icon="Refresh" @click="RefreshTable" plain round />
        </el-col>
        <el-col :span="24">
            <el-table :data="TableData" max-height="68vh" v-loading="loading"
                :header-cell-style="{ background: '#f4f6f8' }">
                <el-table-column type="expand">
                    <template #default="props">
                        <div style="padding: 20px;">
                            <el-descriptions title="详细信息" :column="2" direction="vertical">
                                <el-descriptions-item label="人物形象" :span="2">
                                    <el-image style="max-width: 1000px; max-height: 1000px;border-radius: 4px;"
                                        :src="!props.row.avatar ? 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' : props.row.avatar"
                                        fit="fill">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-icon><icon-picture /></el-icon>
                                            </div>
                                        </template>
                                    </el-image>
                                </el-descriptions-item>
                                <el-descriptions-item label="别称">
                                    <h3>{{ props.row.nickname ? props.row.nickname : '未知' }}</h3>
                                </el-descriptions-item>
                                <el-descriptions-item label="原名">
                                    <h3>{{ props.row.name ? props.row.name : '佚名' }}</h3>
                                </el-descriptions-item>
                                <el-descriptions-item label="简介" :span="2">
                                    {{ props.row.intro ? props.row.intro : '此人太神秘了...' }}
                                </el-descriptions-item>
                                <el-descriptions-item :span="2">
                                    <el-divider content-position="left">
                                        <h3>作品</h3>
                                    </el-divider>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <el-space :size="10" wrap>
                                        <Card url=""
                                            :name="props.row.production ? props.row.production : props.row.animename" />
                                    </el-space>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="作者名" prop="name" :header-cell-class-name="'custom-header'" />
                <el-table-column label="性别" prop="gender" :header-cell-class-name="'custom-header'" />
                <el-table-column label="国籍" prop="country" :header-cell-class-name="'custom-header'" />
                <el-table-column label="创建人" :header-cell-class-name="'custom-header'" />
                <el-table-column label="创建时间" prop="create" width="160" align="center"
                    :header-cell-class-name="'custom-header'" />
                <el-table-column label="操作" width="300" fixed="right" align="center"
                    :header-cell-class-name="'custom-header'">
                    <template #default="{ row }">
                        <el-space :size="10" wrap>
                            <el-switch v-model="row.is_show" inline-prompt active-text="展示" inactive-text="隐藏"
                                :active-value="0" :inactive-value="1" :active-action-icon="View"
                                :inactive-action-icon="Hide"
                                style="--el-switch-on-color:  #13ce66; --el-switch-off-color: #ff4949" />
                            <el-button type="warning" :icon="Edit" link>修改</el-button>
                            <el-button type="danger" :icon="Delete" link>删除</el-button>
                        </el-space>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
        </el-col>
        <el-col :span="24">
            <el-pagination v-model:currentPage="currentPage" :page-sizes="[20, 40, 80, 100]" v-model:page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalItems" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" hide-on-single-page class="pagination" />
        </el-col>
    </el-row>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { ElSpace, ElDescriptions, ElInput, ElDivider, ElTag, ElButton, ElSwitch, ElDescriptionsItem, ElRow, ElCol, ElTable, ElTableColumn, ElEmpty, ElPagination } from 'element-plus';
import { Edit, Delete, Refresh, Search, Picture as IconPicture, View, Hide } from '@element-plus/icons-vue';
import { Info } from '@/Apis/modules/authorship';
import AuthorShipStore from '@/stores/modules/AuthorShipStore'

// 获取数据
onMounted(async () => await GetAuthorShipInfo());

const store = AuthorShipStore();
const search = ref('');
const loading = ref(false)        // 懒加载赋值
const currentPage = ref(1);       // 当前页码
const pageSize = ref(20);         // 每页显示的数据条
const totalItems = ref(0);        // 总数据条数
// 分页
const handleSizeChange = (val) => {
    pageSize.value = val;         // 更新每页显示的数据条数
    currentPage.value = 1;        // 重置当前页码为第一页
}
const handleCurrentChange = (val) => {
    currentPage.value = val;      // 更新当前页码
}

// 动态渲染页面并筛选
const TableData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;

    return store.info.slice(start, end);
});

// 异步获取数据
const GetAuthorShipInfo = async () => {
    loading.value = true;
    setTimeout(async () => {
        await Info();
        loading.value = false;
    }, 1000)
}

// 刷新
const RefreshTable = async () => { await GetAuthorShipInfo() };
</script>

<style scoped>
.pagination {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.roles_avatar {
    max-width: 400px;
    max-height: 400px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
}
</style>